<template>
    <div class='row'>
        <!--车辆基本信息-->
        <div class="col-lg-12">
            <!--表格左边模块-->
            <div class="col-lg-6">
                <table class="table ">
                    <tr>
                        <td>
                            <b style="margin-top:3px; float:left;">车牌号：</b>
                        </td>
                        <td>
                            <i-switch size="large" style="border-radius:24px; float:left;">
                                <span slot="open">包含</span>
                                <span slot="close">等于</span>
                            </i-switch>
                            <input type="text" v-model.trim="vec.VLPN.value" placeholder="车牌号" class="form-control input-sm " style="width:200px; height:25px; float:left; margin-left:10px;">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b style="margin-top:3px; float:left;">车牌颜色( = )：</b>
                        </td>
                        <td>
                            <Select v-model="vec.VLPNColor.model" class="select">
                                <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
                            </Select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-lg-6">
                <table class="table ">
                    <tr>
                        <td>
                            <b style="margin-top:3px; float:left;">品牌：</b>
                        </td>
                        <td>
                            <i-switch size="large" style="border-radius:24px; float:left;">
                                <span slot="open">包含</span>
                                <span slot="close">等于</span>
                            </i-switch>
                            <input type="text" v-model.trim='vec.FactoryPlateModel.value' class="form-control input-sm " placeholder="品牌" style="width:230px; height:25px; float:left; margin-left:10px;">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b style="margin-top:3px; float:left;">初登日期：</b>
                        </td>
                        <td>
                            <Date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" :value='vec.VRDATE.value' @on-change="vec.VRDATE.value=$event" placeholder="选择日期和时间" style="width: 100%"></Date-picker>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<style>

</style>

<script>
import { Vehicle } from '@/Entities/Vehicle'
import qs from 'qs'

export default {
    props: ['vecId'],
    data() {
        return {
            vec: new Vehicle(),
            isNew: null, // false 编辑, true新增
            cityList: [
                {
                    value: '0',
                    label: '全部'
                },
                {
                    value: '01',
                    label: '蓝色'
                },
                {
                    value: '02',
                    label: '黄色'
                },
                {
                    value: '03',
                    label: '黑色'
                },
                {
                    value: '04',
                    label: '白色'
                }
            ],
            model1: ''
        }
    },
    watch: {
        vecId(curVal, oldVal) {
            if (!curVal) {
                this.reset();
            }
            if (curVal && curVal !== oldVal) {
                this.getVehicleByVehicleID(curVal);
            }
        }
    },
    methods: {
        getVehicleByVehicleID(vehicleID) {
            let params = {
                data: vehicleID
            };
            params = qs.stringify(params);
            this.$axios.post("/vehicle/Vehicle/GetVehicleInfoByVehicleID", params, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((res) => {
                let data = res.data.Vehicle;
                if (!!data) {
                    // this.$data.vec=data.Vehicle;
                    this.vec.VehicleID.value = data.VehicleID;
                    this.vec.VLPN.value = data.VLPN;
                    this.vec.VLPNColor.value = data.VLPNColor;
                    this.vec.VRDATE.value = data.VRDATE;
                    this.vec.FactoryPlateModel.value = data.FactoryPlateModel;
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        reset() {
            this.vec.VehicleID.value = null;
            this.vec.VLPN.value = null;
            this.vec.VLPNColor.value = null;
            this.vec.VRDATE.value = null;
            this.vec.FactoryPlateModel.value = null;
        }
    }
}

</script>
